<template>
	<view class="">
		<view class="p12 mb14 pb0" style="background: #FAFBFA;">
			<view class="u-f-item u-f-jsb mt25">
				<view class="u-f-item">
					<u-avatar size="100" :src="userInfo.avatar"></u-avatar>
					<view class="pl8">
						<view class="fz16 u-font-bold">{{userInfo.name}}</view>
						
					</view>
				</view>
				<view class="u-flex" @click="toPage('/pages/community/revise')">
					<image src="../../static/image/ic-msg.png" class="w44 h44"></image>
				</view>
			</view>
			<view class="mt25">
				<u-tabs bg-color="#FAFBFA" bar-width="120" active-color="#70B52C" :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		
			<view class="p12">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @click="toInfo(item)" class="demo-warter pr6" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.title}}</view>
		
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @click="toInfo(item)" class="demo-warter pl6" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.title}}</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus"></u-loadmore>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				tabList: [{
					name: '我的分享'
				}, {
					name: '我的收藏'
				}],
				curTab: 1,
				current: 0,
				loadStatus: 'loadmore',
				flowList: [],
				list: []
			}
		},
		onLoad() {
			if (this.$db.get("userToken")) {
				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.isLogin = true
						this.userInfo = res.data;
					}
				})

			}
			this.initData()
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			change(e){
				this.current=e
				this.initData()
			},
			toInfo(item) {
					
					let that = this
				if(that.current==0){
					uni.showActionSheet({
						itemList: ['查看详情', '删除'],
						success: function(res) {
							if (res.tapIndex == 0) {
								
								uni.navigateTo({
									url: '/pages/community/info?id='+item.id
								})
							} else if (res.tapIndex == 1) {
									
									
								that.$common.modelShow('提示', '确认要删除该底稿吗?', () => {
									
									
										that.$api.communityDel({
											id: item.id
										}, res => {
											if (res.code == 200) {
									
												that.$common.successToShow('删除成功', ress => {
													that.initData()
												})
											} else {
												that.$common.errorToShow(res.message)
											}
										})
								});
							}
							console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						}
					});
				}else{
					
					uni.navigateTo({
						url: '/pages/community/info?id='+item.communityId
					})
				}
				
			},
			
			initData() {
				this.page = 1
				this.flowList = []
				this.$refs.uWaterfall.clear();
				this.getData()
			
			},
			getData() {
				let api='communityMyList'
				if(this.current==1){
					api="communityCollectList"
				}
				this.$api[api]({
					pageNo: this.page,
					keyword: this.keyword,
					pageSize: 10,
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	.user-info {
		width: 232rpx;
		background: rgba(25, 41, 28, 0.05);
	}

	.module-search {
		flex: 1;
		background: rgba(25, 41, 28, 0.05);
	}
</style>